<template>
	<view class="" style="display: flex;width: 100%;justify-content: center;align-items: center;">
		<view class="pushTitle">
			<view class="start" style="">
			</view>
			<view style="font-size: 20px;padding: 0px 5px;">{{title}}</view>
			<view class="start" style="">
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		name: 'cf-title',
		props: {
			title: { //标题
				type: String,
				default: '商品详情'
			},
		},
		data() {
			return {}
		},
		//事件监听
		watch: {},
		onLoad() {},
		methods: {

		}
	}
</script>
<style lang="scss">
	.pushTitle {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 10px;
		width: 60%;
	}

	.start {
		flex: 1;
		height: 1px;
		background-image: linear-gradient(to right, #828282 35%, rgba(255, 255, 255, 0) 0%);
		/* 35%设置虚线点x轴上的长度 */
		background-position: bottom;
		/* top配置上边框位置的虚线 */
		background-size: 10px 1px;
		/* 第一个参数设置虚线点的间距；第二个参数设置虚线点y轴上的长度 */
		background-repeat: repeat-x;
	}
</style>
